<template>
    <h1>这是首页</h1>
    <div>
        <RouterLink to="/index">去第二个页面</RouterLink>
        <RouterLink to="/login">去登录页面</RouterLink>
        <RouterLink to="/userList">用户列表</RouterLink>
        <!-- <h1>{{ obj }}</h1> -->
        <mark>{{ afterNum }}</mark>
<!-- 
        <button @click = "handleChange"> 为事件处理函数</button> -->
        <input type="text" @click = "handleChange" v-model="flag">
        <h3 ref="myH3">这是h3</h3>
    </div>
</template>

<script setup lang="ts">
    import {RouterLink} from "vue-router"
    // import type {definePropsType} from "../model"
    import {computed, onMounted, ref ,type Ref,getCurrentInstance} from "vue"
    // let obj:definePropsType = {
    //     msg:"这是导入的接口对象",
    //     tel:123
    // }
    // 计算属性
    let num:Ref<number>= ref(100);
    let flag = "这是input"
    let afterNum = computed<number>(()=>{
        return num.value*2
    });
    function handleChange(event:Event) {
        console.log((event.target as HTMLInputElement).value)
    }

    // 为模板引用标注类型
    let myH3 = ref<HTMLElement|null>(null);
    onMounted(()=>{
        console.log(myH3.value);
        
    })
   
</script>

<style scoped>

</style>